import { HomeOutlined, TeamOutlined, FileTextOutlined } from "@ant-design/icons";
import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";
import PermissionRoute from "@/components/PermissionRoute";

const App = lazy(() => import("@/App"));
const Home = lazy(() => import("@/pages/home"));
const Client = lazy(() => import("@/pages/manage/userManage"));
const ArticleManage = lazy(() => import("@/pages/manage/articleManage"));

export const mainRoutes = [
  {
    path: "/",
    element: (
      <Suspense>
        <App />
      </Suspense>
    ),
    meta: {
      isShowNav: false,
    },
    children: [
      {
        index: true,
        element: <Navigate to="/home" replace />,
        meta: {
          isShowNav: false,
        },
      },
      {
        path: "/home",
        element: (
          <Suspense>
            <Home />
          </Suspense>
        ),
        meta: {
          title: "首页",
          icon: <HomeOutlined />,
          isShowNav: true,
          requiresAuth: true,
          roles: ['user', 'admin'],
        },
      },
      {
        path: "/client-manage",
        element: (
          <PermissionRoute roles={['admin']}>
            <Suspense>
              <Client />
            </Suspense>
          </PermissionRoute>
        ),
        meta: {
          title: "用户管理",
          icon: <TeamOutlined />,
          isShowNav: true,
          requiresAuth: true,
          roles: ['admin'],
        },
      },
      {
        path: "/article-manage",
        element: (
          <PermissionRoute roles={['admin','user']}>
            <Suspense>
              <ArticleManage />
            </Suspense>
          </PermissionRoute>
        ),
        meta: {
          title: "文章管理",
          icon: <FileTextOutlined />,
          isShowNav: true,
          requiresAuth: true,
          roles: ['admin','user'],
        },
      },
    ],
  },
];
